<template>
  <div class="main">
    <div class="main-content">
      <div class="main-login">
        <div class="main-login-tile">
          <img src="../assets/img/logo.png" alt="">
          <span>值班系统</span>
        </div>
        <div class="main-login-input">
          <el-form ref="resetLoginRef" :rules="islogin ? loginFormRules : dutyLoginFormRules" :model="loginForm"
            label-width="80px">
            <el-form-item prop="user_name" :label="userName">
              <el-input v-model="loginForm.user_name" :placeholder="'请输入'+ userName"></el-input>
            </el-form-item>
            <el-form-item prop="password" :label="passWord">
              <el-input :type="islogin ? 'password':'text'" v-model="loginForm.password" :show-password="islogin" :placeholder="'请输入'+ passWord"></el-input>
            </el-form-item>
            <el-form-item style="text-align:center">
              <el-button @click="loginSubmit"  type="primary">登录</el-button>
              <el-button @click="resetForm('resetLoginRef')" style="margin-left:80px;">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      var validateNumber = (rule, value, callback) => {
        var regPhoneNumber = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
        if (value === '') {
          callback(new Error('请输入手机号'));
        } else if (!regPhoneNumber.test(this.loginForm.password)) {
          callback(new Error('请输入合法手机号'));
        } else {
          callback();
        }
      }

      return {
        islogin: true,
        userName: '用户名',
        passWord: '密码',
        // 登录表单数据
        loginForm: {
          user_name: '',
          password: ''
        },
        // 表单验证规则
        loginFormRules: {
          user_name: [{
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 0,
              max: 8,
              message: '长度在 0 到 8 个字符',
              trigger: 'blur'
            }
          ],
          password: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 16,
              message: '长度在 6 到 16 个字符',
              trigger: 'blur'
            }
          ]
        },
        // 值班人验证规则
        // 表单验证规则
        dutyLoginFormRules: {
          user_name: [{
              required: true,
              message: '请输入姓名',
              trigger: 'blur'
            },
            {
              min: 0,
              max: 8,
              message: '长度在 0 到 8 个字符',
              trigger: 'blur'
            }
          ],
          password: [{
              required: true,
              message: '请输入电话号码',
              trigger: 'blur'
            },
            {
              validator: validateNumber,
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      // 点击登录
      loginSubmit() {
        if (this.islogin) {
          this.$refs.resetLoginRef.validate(async valid => {
            // 判断验证是否通过
            if (!valid) return;
            //  发起请求
            this.$http.post('OAuth/login', this.loginForm)
              .then(res => {
                if (res.data.code !== 200) return this.$message.error(res.data.msg)
                //1.将登陆之后的token，保存到客户端的sessionStorage中
                window.sessionStorage.setItem("token", "Bearer " + res.data.data.token)
                 window.sessionStorage.setItem("user_id", res.data.data.user_id)
                this.$message.success(res.data.msg);
                this.loginForm.user_name = ''
                this.loginForm.password = ''
                
               
                  
                this.userName = '姓名'
                this.passWord = '电话'
                this.islogin = false

                this.resetForm()
                

                //2.通过编程式导航跳转到主页
                // this.$router.push('/index');
              }).catch(err => {
                this.$message({
                  dangerouslyUseHTMLString: true,
                  showClose: true,
                  message: err.response.data.data.join('<br>'),
                  type: 'error'
                });
              })
          })
        } else {
          this.$refs.resetLoginRef.validate(async valid => {
            // 判断验证是否通过
            if (!valid) return;
            //  发起请求
            console.log(11);
            let fordata = {
              name:this.loginForm.user_name,
              phone_number:this.loginForm.password
            }
            console.log(fordata);
            this.$http.post('front/loginrecord',fordata)
              .then(res => {
                if (res.data.code !== 200) return this.$message.error(res.data.msg)
                this.$message.success(res.data.msg);
                this.userName = '用户名'
                this.passWord = '密码'
                this.islogin = true
                //2.通过编程式导航跳转到主页
                this.$router.push('/index');
              }).catch(err => {
                this.$message({
                  dangerouslyUseHTMLString: true,
                  showClose: true,
                  message: err.response.data.data.join('<br>'),
                  type: 'error'
                });
              })
          })
        }

      },
      // 重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },

  }
</script>

<style lang='less' scoped>
  .mian {
    width: 100%;
    height: 100%;
    min-height: 1080px;
    position: relative;
  }

  .main-content {
    width: 100%;
    height: 937px;

    background: url('../assets/img/bg1.png') no-repeat;
    background-size: cover;
    background-position: center;
  }

  .main-login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 530px;
    height: 530px;
    background: rgba(255, 255, 255, 1);
    border: 3px solid rgba(255, 255, 255, 1);
    border-radius: 50%;

    .main-login-tile {
      display: flex;
      margin: 0 auto;
      justify-content: center;
      align-items: center;
      margin-top: 40px;
      height: 20%;
      width: 80%;
      border-bottom: 3px solid rgba(0, 0, 0, 0.1);

      img {
        width: 54px;
        height: 54px;
        display: inline-block;
        vertical-align: middle;
      }

      span {
        margin-left: 20px;
        vertical-align: middle;
        font-size: 20px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.82);
      }
    }

    .main-login-input {
      display: block;
      height: 70%;
      width: 80%;
      margin: 0 auto;
      padding: 60px 0 0 40px;

      .el-form {
        width: 80%;
      }
    }

    .el-form-item {
      margin-bottom: 50px;
    }

  }
</style>